import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Pagination,Icon } from 'antd-mobile';
import wangeditor from 'wangeditor'
import '../../utils/common.scss'
import './index.scss'

import Top from '../../components/top/top'
import utils from '../../utils/utils';

interface IState {
  resData:any,
  textContent:any
}
interface IProps extends RouteComponentProps {
}
class Getstart extends React.Component<IProps, IState> {
  state = {
    resData:{
      id:'',
      author_id:'',
      tab:'',
      content:'',
      title:'',
      last_reply_at:'',
      good:false,
      top:false,
      reply_count:0,
      visit_count:0,
      create_at:'',
      author:{
        loginname:''
      }
    },
    textContent:''
  }
  componentDidMount(){
    let htmlDom = this.refs.text_share_box;
    let htmlObj = new wangeditor(htmlDom);
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    htmlObj.customConfig.onchange = (html:any) => {
      this.setState({
        textContent: html
      })
    }
    htmlObj.create();
    htmlObj.txt.html('<h1>网站未提供相关接口,无法评论。</h1>')
    this.getTextDetail();
  }
  //获取主题详情
  getTextDetail=()=>{
    Get(`/api/v1/topic/${(this.props.match.params as any).id}`,{}).then((res)=>{
      if(res.success){
        res.data.create_at=utils.formatDate1(res.data.create_at);
        this.setState({
          resData:res.data
        })
      }
    },(err)=>{
      console.log(err);
    })
  }
  render() {
    let {resData,textContent} =this.state;
    return (
      <div className='text_detail_box'>
        <Top history={this.props.history}></Top>
        <div className='text_detail'>
          <div className='text_name font_36'>{resData.title}</div>
          <div className='text_about pad_b_30'>
            <i className='icon icon_dengji mar_r_10'></i><span className='mar_r_20'>{resData.create_at}</span>
            <i className='icon icon_dengji mar_r_10'></i><span className='mar_r_20'>{resData.author.loginname}</span>
            <i className='icon icon_dengji mar_r_10'></i><span className='mar_r_20'>{resData.visit_count} 次浏览</span>
          </div>
          <div className='pad_30' dangerouslySetInnerHTML={{__html: resData.content}}></div>
          <div className='clear clear20'></div>
          <div className='text_share'>评论/回复</div>
          <div className='text_share_box' ref="text_share_box"></div>
        </div>
      </div>
    )
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    userInfo:store.userInfo
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
  setPlayListAct(data:any){
    store.setPlayListAct(data)
  },
  setMp3ListAct(data:any){
    store.setMp3ListFun(data)
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Getstart); 
